<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="static/css/pagination.css"/>
<link rel="stylesheet" href="static/ztree/zTreeStyle.css"/>
<script type="text/javascript" src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="static/jquery/jquery.pagination.js"></script>
<body>
<%@ include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@ include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="glyphicon glyphicon-th"></i> 数据列表
                    </h3>
                </div>
                <div class="panel-body">
                    <form action="/admin/authority/role/list" method="POST" id="searchForm" class="form-inline"
                          role="form" style="float: left;" onsubmit="page.searchSubmit();return false;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input name="keyword" id="keyword" class="form-control has-success" type="text"
                                       value="" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float: right; margin-left: 10px;" id="delete-btn">
                        <i class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button style="float: right;" class="btn btn-primary" id="add-btn">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear: both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="table-body">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="modal-role-add.jsp"%>
<%@include file="modal-role-edit.jsp"%>
<%@include file="modal-role-assign-role.jsp"%>
<script src="static/js/curl.js"></script>
<script src="static/js/page.js"></script>
<script>
    let page = new Page("/admin/authority/role/list", ["name"]);
    //页面加载后请求list接口获取数据
    $(document).ready(function () {
        $('#menu-authority').removeClass('tree-closed');
        $('#menu-authority>ul').attr('style', 'margin-top: 10px;display: block;');

        page.render();
    });

    $('#add-btn').bind('click', function () {
        $('#addModal').modal("show");
    });

    $('#saveRoleBtn').click(function () {
        let roleName = $.trim($('#addModal [name=roleName]').val());

        if (roleName === "" || roleName == null) {
            layer.alert("角色名不能为空", {icon: 3});
            return false;
        }
        let data = {
            "name": roleName
        }
        curl.post('/admin/authority/role/add', data, 1, true, function (res) {
            if (res.result === 'success') {
                layer.alert('保存成功！', {icon: 1});
                page.render(999999);
            } else {
                layer.alert(res.message, {icon: 5});
            }
        }, function (msg) {
            layer.alert(msg, {icon: 5});
        });

        $('#addModal [name=roleName]').val("");
        $('#addModal').modal("hide");
    });

    $('#table-body').on('click', '.my-btn-edit', function () {
        let id = $(this).data('id');

        //get
        curl.get("/admin/authority/role/update/" + id, "", true, function (res) {
            if (res.result === 'success') {
                $('#editModal [name=roleId]').val(res.data.id);
                $('#editModal [name=roleName]').val(res.data.name);
                $('#editModal').modal('show');
            } else {
                layer.alert(res.message, {icon: 5});
            }
        }, function (error) {
            layer.alert(error, {icon: 5});
        });
    });

    $('#updateRoleBtn').on('click', function () {
        let roleId = $('#editModal [name=roleId]').val();
        let roleName = $.trim($('#editModal [name=roleName]').val());

        if (roleName === "" || roleName == null) {
            layer.alert("角色名不能为空", {icon: 3});
            page.render();
            return false;
        }
        let data = {
            "id": parseInt(roleId),
            "name": roleName
        }
        let url = "/admin/authority/role/update?pageNum" + page.data.pageNum + "&pageSize=" + page.data.pageSize + "&keyword=" + $('#keyword').val();

        curl.post(url, data, 1, true, function (res) {
            if (res.result === 'success') {
                layer.alert('保存成功！', {icon: 1});
                page.render(page.data.pageNum);
            } else {
                layer.alert(res.message, {icon: 5});
            }
        }, function (msg) {
            layer.alert(msg, {icon: 5});
        });

        $('#editModal [name=roleId]').val("");
        $('#editModal [name=roleName]').val("");
        $('#editModal').modal("hide");
    });

    $('#table-body').on('click', '.my-btn-delete', function () {
        let id = $(this).data('id');
        let data = [id];
        layer.confirm('确认删除以下记录？<br/>id = ' + data, {
            icon: 7,
            btn: ['删除', '取消']
        }, function () {
            curl.post("admin/authority/role/delete", data, 1, true, function (res) {
                if (res.result === 'success') {
                    layer.alert('删除成功！', {icon: 1});
                    page.render(page.data.pageNum);
                } else {
                    layer.alert(res.message, {icon: 5});
                }
            }, function (msg) {
                layer.alert(msg, {icon: 5});
            });
        });
    });

    //分配角色
    var zAuthTree;
    $('#table-body').on('click', '.my-btn-assign', function () {
        let that = this;
        getAuthTreeData()
            .then(function (data) {
                renderAuthTree(data);
                let roleId = $(that).data('id');
                return getRoleAssignAuth(roleId);
            })
            .then(function (data) {
                for (let i = 0; i < data.length; i++) {
                    let treeNode = zAuthTree.getNodeByParam("id", data[i].id);
                    zAuthTree.checkNode(treeNode, true, false);
                }
                $('#assignModal').modal('show');
            })
            .catch(function (error) {
                layer.alert(error, {icon: 5});
            });
    });

    function getAuthTreeData() {
        return new Promise(function (resolve, reject) {
            curl.get("admin/authority/auth/tree", "", true, function (res) {
                if (res.result === 'success') {
                    resolve(res.data);
                } else {
                    reject(res.message);
                }
            }, function (msg) {
                reject(msg);
            });
        });
    }

    function getRoleAssignAuth(roleId) {
        console.log(roleId)
        return new Promise(function (resolve, reject) {
            curl.get("admin/authority/role/auth/get?roleId=" + roleId, "", true, function (res) {
                if (res.result === 'success') {
                    resolve(res.data);
                } else {
                    reject(res.message);
                }
            }, function (msg) {
                reject(msg);
            });
        });
    }

    function renderAuthTree(data) {
        let setting = {
            "data": {
                "simpleData": {
                    "enable": true,
                    "id": "id",
                    "pIdKey": "categoryId"
                },
                "key": {
                    "name": "title"
                }
            },
            "check": {
                "enable": true
            }
        };
        zAuthTree = $.fn.zTree.init($("#assignAuthTree"), setting, data);
        zAuthTree.expandAll(true);
    }
</script>
</body>
</html>